import { useRef, useEffect } from 'react';
import * as echarts from 'echarts';

const BarChart = props => {
  const {
    xData,
    sData,
    style = { width: '400px', height: '300px' }
  } = props;

  const chartRef = useRef(null);

  useEffect(
    () => {
      // 1. 生成实例
      const myChart = echarts.init(chartRef.current);
      // 2. 准备图表参数
      const option = {
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: sData,
            type: 'bar'
          }
        ]
      };
      // 3. 渲染参数
      myChart.setOption(option);
    },
    [sData, xData]
  );

  return (
    <div ref={chartRef} style={style}></div>
  );
}


export default BarChart;